<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="deacription" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <!-- 监视练习 -->
        <div id="add">
            <p>姓：<input type="text" v-model="xName"></p>
            <p>名：<input type="text" v-model="mName"></p>
            <p>姓名：{{name}}</p>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    xName:"",
                    mName:"",
                    name:"",
                },
                methods:{},
                watch:{
                    xName(xName){
                        this.name = this.xName + this.mName;
                    },
                    mName(mName){
                        this.name = this.xName + this.mName;
                    },
                },
            });
            vm.$mount("#add");
        </script>
    </body>
</html>